<template>
  <a-form :form="form">
    <a-row>
      <a-col :span="23">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="dataObj.name">
          <rx-textboxlist  ref="valueList" v-model="values">
            <a-icon  type="setting" @click="openDialog(dataObj.type)" />
          </rx-textboxlist>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script>
  import InsPortalPermissionApi from '@/api/portal/core/insPortalPermission'
  import {BaseForm,RxDialog,Dialog} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'ins-portal-permission-preview',
    mixins:[BaseForm],
    components: {
      RxDialog,
      Dialog
    },
    props: {
      dataObj: {
        type: Object,
        default: []
      }
    },
    data(){
      return{
        typeList:[],
        values:{},
        valueList:{
          values:[],
          names:[]
        },
      }
    },
    mounted(){
      if(this.dataObj.values){
        this.getValues();
      }
    },
    methods: {
      openDialog(btn){
        var method=" this.func_" + btn + "()";
        eval(method);
      },
      func_subGroup(){
        this.selectGroups();
      },
      func_group(){
        this.selectGroups();
      },
      selectGroups(){
        var conf={curVm: this,data:{single:false,showDimId:true}, widthHeight: ['900px','600px']};
        Dialog.openGroupDialog(conf,function(self,data){
          for(var i=0;i<data.length;i++){
            var obj =data[i];
            if(self.valueList.values.indexOf(obj.groupId)==-1){
              self.valueList.values.push(obj.groupId);
              self.valueList.names.push(obj.name);
            }
          }
          self.sendChangeValue();
        })
      },
      func_user(){
        var conf ={ curVm: this,data:{single:false}, widthHeight: ['1000px', '600px']};
        Dialog.openUserDialog(conf,function(self,users){
          for(var i=0;i<users.length;i++){
            var obj =users[i];
            if(self.valueList.values.indexOf(obj.userId)==-1){
              self.valueList.values.push(obj.userId);
              self.valueList.names.push(obj.fullName);
            }
          }
          self.sendChangeValue();
        });
      },
      getValues(){
        var values=this.dataObj.values.split(",");
        var names=this.dataObj.names.split(",");
        for(var i=0;i<values.length;i++){
          this.valueList.values.push(values[i]);
          this.valueList.names.push(names[i]);
        }
        this.sendChangeValue();
      },
      sendChangeValue(){
        var changeValues = {
          value:  this.valueList.values.join(","),
          text:  this.valueList.names.join(",")
        };
        this.$refs.valueList.setValues(changeValues, false);
      },
    },
    watch:{
      values:function (val) {
        this.dataObj.values=val.value;
        this.dataObj.names=val.text;
        this.$emit("change",this.dataObj);
      }
    }
  }
</script>

<style scoped>
  .tabButton {
    vertical-align: middle;
    margin-left: 10px;
  }
</style>